import Taro, {Component} from "@tarojs/taro";
import {View, RichText, Image, Text } from "@tarojs/components";
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import { QRCode } from 'taro-code'
import html2canvas from 'html2canvas'
import {IStoreProps} from '../../store/Stores'
import {getRuntime, ServerHost, subtime} from '../../utils/common'

import './index.less'
import './sign.less'

import icon_80 from "../../assets/img/icon_80.png";
import bg_15 from "../../assets/img/bg_15.png";
import bg_16 from "../../assets/img/bg_16.png";
import icon_81 from "../../assets/img/icon_81.png";
import icon_82 from "../../assets/img/icon_82.png";


// 签到
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Company extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    isShow: false,
    info: {
      pictureUrl:'', // 图片路径
      article:'', // 文章信息
    },
    userInfo: {},
    signRecord: {},
    sign: {},
    date: {},
    shareImgSrc: '',
    isShowShare: false
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'早起打卡' })
    this.setState({ userInfo: getRuntime().getUserInfo() })
    this.sign()
    this.getUserSignRecord()
    this.getDate()
    this.getSignedArticle()
  }

  componentDidShow(): void {
    this.setState({ userInfo: getRuntime().getUserInfo() })
  }

  // 签到记录
  getUserSignRecord() {
    let { SignStore } = this.props.stores
    SignStore.getUserSignRecord({
      callback: res => {
        if(res.isTodaySign){
          getRuntime().showToast('您今天已经签过到啦~')
        }
        this.setState({
          signRecord: toJS(res)
        })
      }
    })
  }

  // 打卡
  sign() {
    let { SignStore } = this.props.stores
    SignStore.sign({
      callback: res => {
        this.setState({
          sign: res,
          isShow: true,
        }, () => { this.getUserSignRecord() })
      }
    })
  }

  getSignedArticle() {
    let { SignStore } = this.props.stores
    SignStore.getSignedArticle({
      callback: res => {
        this.setState({
          info: toJS(res)
        })
      }
    })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  close() {
    this.setState({
      isShow: false
    })
  }

  getDate() {
    let now = new Date()
    let month = now.getMonth()
    let monthName:string
    switch (month+1) {
      case 1: { monthName='一月'; break }
      case 2: { monthName='二月'; break }
      case 3: { monthName='三月'; break }
      case 4: { monthName='四月'; break }
      case 5: { monthName='五月'; break }
      case 6: { monthName='六月'; break }
      case 7: { monthName='七月'; break }
      case 8: { monthName='八月'; break }
      case 9: { monthName='九月'; break }
      case 10: { monthName='十月'; break }
      case 11: { monthName='十一月'; break }
      case 12: { monthName='十二月'; break }
    }
    let day = now.getDate()
    this.setState({
      date: { monthName, day }
    })
  }

  html2Canvas() {
    let htmlCanvas = document.getElementById('sign_canvas')
    let width = htmlCanvas.offsetWidth
    let height = htmlCanvas.offsetHeight
    let opts = {
      logging: true,
      // allowTaint: true, //
      tainttest: true, //在渲染前测试图片(没整明白有啥用)
      useCORS: true, //使用跨域(如果有跨域的话必须必须必须带着!)
      background: "#fff",
      width,
      height
    }
    Taro.showLoading({ title: '海报生成中...' })
    html2canvas(htmlCanvas, opts)
      .then( canvas => {
        Taro.hideLoading()
       let imgSrc = canvas.toDataURL('image/jpeg')
        this.setState({ shareImgSrc: imgSrc, isShowShare: true })
      })
  }

  closeShare(e) {
    e.stopPropagation()
    this.setState({ isShowShare: false })
  }

  render() {
    let { isShow,isShowShare,shareImgSrc, info, userInfo, date, signRecord } = this.state
    return (
      <View className='my-my_sign' >
        <View className='sign_canvas' id='sign_canvas' onClick={this.html2Canvas.bind(this)}>
          {info&&info.pictureUrl&& <Image src={info.pictureUrl} className='header' />}
          {!info.pictureUrl&& <Image src={bg_15} className='header' />}
          <View className='date'>
            <Text className='month'>{date.monthName}</Text>
            <Text className='today'>{date.day}</Text>
          </View>

          <View className='list-21'>
            <View className='list-21-item'>
              <Image src={userInfo.avatar} className='img' />
              <View className='info'>
                <View className='list-title'>
                  <View>{userInfo.name}</View>
                </View>
                <View className='list-desc'>打卡时间:  {subtime(signRecord.signTime)}</View>
                <View className='list-info'>
                  成为更好的自己，第 <Text className='day'>{signRecord.signDays+1}</Text> 天
                </View>
              </View>
              <View className='r' style={{display:'none'}}>
                <Image src={icon_80} className='img-play' />
              </View>
            </View>
            {/*二维码图片*/}
            {/*<Image src={img_11} className='img-code' />*/}
            <View className='img-code'>
              <QRCode text={ServerHost+'/m/#/pages/login/register_step_one?invitationCode='+userInfo.id} size={80}  />
              <View>建务通</View>
            </View>
          </View>

          <View className='famous-wrap'>
            <Image src={icon_81} className='famous-icon' />
            <View className='famous-desc rich-text'>
              <RichText nodes={info&&info['article']} />
            </View>
          </View>
        </View>

        {isShowShare&&
        <View className='share-img' onClick={this.closeShare.bind(this)}>
           <Image className='img img-active' src={shareImgSrc} />
           <View className='tipsText'>长按保存图片、识别二维码</View>
        </View>
        }

        <View className={isShow ? 'sign-success sign-show' : 'sign-success'} onClick={this.close.bind(this)}>
         <View className='sign-success-content'>
           <Image src={bg_16} className='success-bg' />
           <View className='info'>
             <View className='title'>打卡成功</View>
             <View className='integral'><Text className='count'>+{signRecord.signPoint} </Text>积分</View>
             <View className='desc'>打卡成功,明天继续来哦~</View>
           </View>
           <Image src={icon_82} className='btn-close' onClick={this.close.bind(this)} />
         </View>
        </View>

        <View className='product-img' onClick={this.closeShare.bind(this)}>
          <View className='tipsText'>点击二维码生成海报</View>
        </View>
      </View>
    )
  }
}

export default Company
